<template>
  <div class="indexPage_container">
    <div class="index_header">头部</div>
    <div class="indexPage_body">
      <div class="indexPage_menu">
        <el-menu
          background-color="#545c64"
          class="el-menu-vertical-demo"
          text-color="#fff"
          unique-opened
          :router="true"
        >
          <el-menu-item index="/index/home">首页</el-menu-item>
          <el-sub-menu
            v-for="menu in menus"
            :index="menu.topMenu.name"
            :key="menu.topMenu.id"
          >
            <template #title>
              <span>{{ menu.topMenu.title }}</span>
            </template>
            <el-menu-item
              v-for="item in menu.children"
              :index="`/${menu.topMenu.name}/${item.name}`"
              :key="item.id"
              >{{ item.title }}</el-menu-item
            >
          </el-sub-menu>
        </el-menu>
      </div>
      <div class="indexPage_content">
        <router-view></router-view>
      </div>
    </div>
    <div class="indexPage_footer">底部</div>
  </div>
</template>

<script lang="ts" setup>
import {} from 'vue'
import { key } from '@/store'
import { useStore } from 'vuex'
import { menuStoreType } from '#/menuStore/menuStoreType'

const store = useStore(key)

const menus: menuStoreType[] = store.getters.getNewMenus
</script>

<style lang="less" scoped>
.indexPage_container {
  height: 100%;
  .index_header {
    height: 10%;
    background-color: #bfa;
  }
  .indexPage_body {
    display: flex;
    height: 85%;
    .indexPage_menu {
      flex: 1;
      background-color: aliceblue;
    }
    .indexPage_content {
      flex: 5;
      padding: 10px;
      background-color: aquamarine;
    }
  }
  .indexPage_footer {
    height: 5%;
    color: #fff;
    background-color: #000000;
  }
}
</style>
